<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鲸飞网络科技有限公司-客服管理系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="admin.css" />
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	    <script type="text/javascript" src="libs/zepto.js" ></script>
	</head>
	<body class="list">
		<div id="app">
			<div class="list_header">
				<el-breadcrumb separator-class="el-icon-arrow-right">
				  <el-breadcrumb-item>客服管理系统</el-breadcrumb-item>
				  <el-breadcrumb-item>客服列表</el-breadcrumb-item>
				</el-breadcrumb>
				<el-button
		          size="small"
		          type="primary"
		          @click="handleAdd">新增客服</el-button>
		         <a href="help.html" class="list_help">帮助</a>
			</div>
			<template>
			  <el-table
			    :data="tableData"
			    border
			    stripe
			    style="width: 1000px; margin: auto;">
			    <el-table-column
			      prop="nickname"
			      label="昵称"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="username"
			      label="用户名"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      width="180"
			      prop="sid"
			      label="客户ID">
			    </el-table-column>
			    <el-table-column
			      width="180"
			      label="头像">
			      <template slot-scope="scope">
			        <img class="list_img" v-bind:src="scope.row.header_image" />
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="操作">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.$index)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</template>
			<!-- 新增客服 -->
			<el-dialog
			  :title="dialogTitle"
			  :visible.sync="add_dialog"
			  width="50%">
			  <div class="list_add">
			  	<div class="list_line">
			  		<el-input placeholder="请输入昵称" v-model="nickname">
					   <template slot="prepend"><span class="red_dot">*</span>昵称</template>
					</el-input>
			  	</div>
			  	<div class="list_line">
			  		<el-input placeholder="请输入用户名" v-model="username">
					   <template slot="prepend"><span class="red_dot">*</span>用户名</template>
					</el-input>
			  	</div>
			  	<div class="list_line">
			  		<el-input placeholder="请输入客服ID" v-model="sid">
					   <template slot="prepend"><span class="red_dot">*</span>客服ID</template>
					</el-input>
			  	</div>
			  	<div class="list_line">
			  		<el-input placeholder="请输入客服url" v-model="href">
					   <template slot="prepend"><span class="red_dot">*</span>客服url</template>
					</el-input>
			  	</div>
			  	<div class="list_upload">
			  		<label style="margin-left: 10px;"><span class="red_dot">*</span>头像</label>
			  		<el-upload
			  		  class="avatar-uploader"
			  		  accept="image/*"
					  action="https://api.hgdqdev.cn/jingfei/upload"
					  :show-file-list="false"
					  :on-success="uploadSuccess">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
			  	</div>
			  </div>
			  <div class="dialog_footer">
			    <el-button @click="add_dialog = false">取 消</el-button>
			    <el-button type="primary" @click="addSureClick">确 定</el-button>
			  </div>
			</el-dialog>
			<div class="tigong">©️鲸飞网络科技有限公司</div>
		</div>
	</body>
	<script>
	  var app = new Vue({
	      el: '#app',
	      data: {
	      	add_dialog: false,
	      	dialogTitle: '新增客服', // 标题
	      	id: '', // id值
	      	imageUrl: '',   // 上传后显示的头像
	      	nickname: '',   // 昵称
			username: '',   // 用户名
			header_image: '', // 
			sid: '',        // 客服ID
			href: '',       // 客服跳转地址
	        tableData: []
	      },
	      mounted: function() {
	      	this.getData();
	      },
	      methods: {
	      	// 新增按钮点击事件
	      	handleAdd: function(){
	      		this.dialogTitle = '新增客服';
	      		this.nickname = '';
  				this.username = '';
  				this.header_image = '';
  				this.imageUrl = '';
  				this.sid = '';
  				this.href = '';
	      		this.add_dialog = true;
	      	},
	      	// 图片上传成功
	      	uploadSuccess: function(res, file){
	      		var status = res.status;
	      		if (status == 100) {
	      			this.imageUrl = res.imageUrl;
	      		}else{
	      			this.$message.error('图片上传失败');
	      		}
	      	},
	      	// 确定添加按钮点击事件
	      	addSureClick: function(){
	      		if (this.nickname == '') {
	      			this.$message({
			          showClose: true,
			          message: '请输入昵称', 
			          type: 'warning'
			        });
			        return;
	      		}
	      		if (this.username == '') {
	      			this.$message({
			          showClose: true,
			          message: '请输入用户名',
			          type: 'warning'
			        });
			        return;
	      		}
	      		if (this.sid == '') {
	      			this.$message({
			          showClose: true,
			          message: '请输入客服ID',
			          type: 'warning'
			        });
			        return;
	      		}
	      		if (this.href == '') {
	      			this.$message({
			          showClose: true,
			          message: '请输入客服url',
			          type: 'warning'
			        });
			        return;
	      		}
	      		if (this.imageUrl == '') {
	      			this.$message({
			          showClose: true,
			          message: '请输上传头像',
			          type: 'warning'
			        });
			        return;
	      		}
	      		// 提交信息
	      		var self = this;
	      		var urlStr = '';
	      		if (self.dialogTitle == '新增客服') {
	      			urlStr = 'https://api.hgdqdev.cn/jingfei/add_user';
	      		} else{
	      			urlStr = 'https://api.hgdqdev.cn/jingfei/modify_user';
	      		}
	      		$.ajax({
	      			type:"get",
	      			url: urlStr,
	      			data: {
	      				nickname: self.nickname,
	      				username: self.username,
	      				header_image: self.imageUrl,
	      				sid: self.sid,
	      				href: self.href,
	      				id: self.id
	      			},
	      			async:true,
	      			success: function(res){
	      				if (res.status == 100) {
	      					self.$message({
					          message: '恭喜你，操作成功！',
					          type: 'success'
					        });
					        self.add_dialog = false;
					        self.getData();
	      				} else{
	      					self.$message.error('操作失败');
	      				}
	      			},
	      			error: function(){
	      				self.$message.error('网络连接失败，请稍后重试');
	      			}
	      		});
	      	},
	      	getData: function(){
	      		var self = this;
	      		$.ajax({
	      			type:"get",
	      			url:"https://api.hgdqdev.cn/jingfei/list_user",
	      			async:true,
	      			success: function(res){
	      				if (res.status == 100) {
	      					self.tableData = res.data;
	      				} else{
	      					self.$message.error('获取失败');
	      				}
	      			},
	      			error: function(){
	      				self.$message.error('网络连接失败，请稍后重试');
	      			}
	      		});
	      	},
	      	// 编辑按钮点击事件
	      	handleEdit: function(index){
	      		var userInfo = this.tableData[index];
	      		this.nickname = userInfo.nickname;
  				this.username = userInfo.username;
  				this.header_image = userInfo.header_image;
  				this.imageUrl = userInfo.header_image;
  				this.sid = userInfo.sid;
  				this.href = userInfo.href;
  				this.id = userInfo.id;
  				this.dialogTitle = '修改客服信息';
  				this.add_dialog = true;
	      	},
	      	// 删除按钮点击事件
	      	handleDelete: function(index){
	      		var userInfo = this.tableData[index];
	      		var id = userInfo.id;
	      		var self = this;
	      		this.$confirm('此操作将永久删除该客服, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			         $.ajax({
		      			type:"get",
		      			url:"https://api.hgdqdev.cn/jingfei/delete_user",
		      			data: {
		      				id: id
		      			},
		      			async:true,
		      			success: function(res){
		      				if (res.status == 100) {
		      					self.$message({
						          message: '恭喜你，操作成功！',
						          type: 'success'
						       });
						        self.getData();
		      				} else{
		      					self.$message.error('操作失败');
		      				}
		      			},
		      			error: function(){
		      				self.$message.error('网络连接失败，请稍后重试');
		      			}
		      		});
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
	      	},
	      }
	  })
	</script>
</html>
